<template>
	<view class="containerBox">
		<!-- <f-navbar title="六零空间" fontColor="#000"
			gradient="linear-gradient(-180deg, #E1265D, #E16726)" navbarType='5'
			:isShowLeft="false" :isShowTransparentTitle="true">
			<view class="u-nav-slot flex-a" slot="left">
		
			</view>
		</f-navbar> -->
		<view class="top p-lr-34 flex-j-b">
			<!-- tab切换 -->
			<view class="tab flex ">
				<view class="image flex-c borderRadius20" @click="tab(1)" :class="[currentIndex == 1?'active': '']">
					<image src="/static/home/xiaoyuan.png" mode=""></image>
				</view>
				<view class="image flex-c borderRadius20" @click="tab(2)" :class="[currentIndex == 2?'active': '']">
					<image src="/static/home/xiaoyou.png" mode=""></image>
				</view>
			</view>
			<!-- 搜索框 -->
			<u-search width='163' height='33' :clearabled="true" placeholder="输入关键词" v-model="search" bg-color="#fff"
				:show-action='false'></u-search>
			<image class="avctor m-l-28" src="/static/home/avctor.png" mode=""></image>

		</view>
		<!-- <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(item, index) in bannerList" :key="index">
				<view class="swiper-item">
					<image style="
			          width: 653rpx;
			          border-radius: 6px;
			        " mode="" :src="item.image" @error="imageError"></image>
				</view>
			</swiper-item>
		</swiper> -->
		<u-swiper
		            :list="bannerList"
		            keyName="image"
		            :autoplay="true"
					:indicator='true'
					nextMargin='20'
					previousMargin='20'
					bgColor='#B8E9FF'
					current='1'
					:circular='true'
		    ></u-swiper>
		<view class="list m-28 flex-j-a ">
			<view class="item flex-a-c flex-d-c">
				<image src="/static/home/xxzl.png" mode=""></image>
				<view class="m-tb-22">
					学习资料
				</view>
			</view>
			<view class="item flex-a-c flex-d-c">
				<image src="/static/home/xxzl.png" mode=""></image>
				<view class="m-tb-22">
					学习资料
				</view>
			</view>
			<view class="item flex-a-c flex-d-c">
				<image src="/static/home/xxzl.png" mode=""></image>
				<view class="m-tb-22">
					学习资料
				</view>
			</view>
			<view class="item flex-a-c flex-d-c">
				<image src="/static/home/xxzl.png" mode=""></image>
				<view class="m-tb-22">
					学习资料
				</view>
			</view>
		</view>
		<view class="p-28 flex" style="width: 100%;">
			<image class="" src="/static/home/cate1.png" style="width: 50%; height: 246rpx;" mode=""></image>
			<view class="flex-d-c flex-j-b" style="width: 50%;">
				<image style="height: 121rpx;" src="/static/home/cate2.png" mode=""></image>


				<image style="height: 121rpx;" src="/static/home/cate3.png" mode=""></image>
			</view>
		</view>
		<view class="flex-a-c m-lr-28" style="width:100%;height: 88rpx;">
			<view class="padding-right-sm">
				<image src="/static/home/gonggao.png" style="width: 82rpx;height: 44rpx" mode=""></image>
				
			</view>
			<swiper style="width: 100%;height: 100%" class=" flex-a-c" circular :vertical="true" :indicator-dots="false"
				:autoplay="true" :interval="interval" :duration="duration" previous-margin='20rpx' next-margin='20rpx'>
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="">
						8月活动预告！超级会员史低！福利大放送！
					</view>
				</swiper-item>
			</swiper>

		</view>
		<u-tabs :list="list" :is-scroll="true"  :current="current" @change="change"></u-tabs>
		<view class="textContent b-t-gray m-tb-22">
			<view class="item b-b-gray p-34" v-for="(item, index) in textCon" :key="index">
				<view class="flex flex-a-c flex-j-b">
					<view class="flex flex-a-c">
						<view class="type borderRadius20 bg-red p-14">
							{{item.name }}
						</view>
						<view class="fontSize30 p-l-28">
							{{item.title}}
						</view>
					</view>
					<view class="bg-gray flex-c fontSize25 colorWrite" style="width: 56rpx;height: 30rpx" v-if="item.isAd">
						广告
					</view>
				</view>
				<view class="flex-j-b fontSize25 m-t-28 colorGray">
					<view class="flex">
						<view class="">
							发布时间：{{item.time}}
						</view>
						<view class="p-l-28">
							详情：{{item.detail}}
						</view>
					</view>
					<view class="">
						热度：{{item.hot}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	
		import fNavbar from '@/components/module/f-navbar/f-navbar';
	export default {
		comments: {
			fNavbar
		},
		data() {
			return {
				textCon: [
					{
						name: '二手闲置',
						title: '出售闲置：#书桌,椅子，文具多...',
						isAd: true,
						time: '1小时前',
						hot:'2891',
						detail: '本人自用低价出'
					},
					{
						name: '二手闲置',
						title: '出售闲置：#书桌,椅子，文具多...',
						isAd: false,
						time: '1小时前',
						hot:'2891',
						detail: '本人自用低价出'
					},
					{
						name: '二手闲置',
						title: '出售闲置：#书桌,椅子，文具多...',
						isAd: false,
						time: '1小时前',
						hot:'2891',
						detail: '本人自用低价出'
					}
				],
				list: [{
					name: '全部'
				},{
					name: '校园论坛'
				}, {
					name: '二手闲置'
				}, {
					name: '顺手带',
					count: 5
				},{
					name: '组队摇人'
				}],
				current: 0,
				currentIndex: 1, //1.校园版 2.校友版
				search: '',
				//   轮播图
				background: ["color1", "color2", "color3"],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerList: [{
						image: "/static/home/banner1.png",
					},
					{
						image: "/static/home/banner1.png",
					},
					{
						image: "/static/home/banner1.png",
					},
				],
			}
		},
		methods: {
			tab(index) {
				this.currentIndex = index
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.containerBox {
		background-image: linear-gradient( to bottom, #B8E9FF, #fff);
		.top {
			height: 152rpx;

			.tab {
				width: 224rpx;
				height: 48rpx;
				background-color: #DEF5FF;
				border-radius: 20rpx;
				margin-right: 44rpx;

				.image {
					flex: 1;
					height: 100%;

					image {
						width: 80rpx;
						height: 22rpx;
					}

				}

				.active {
					background-color: #fff;
				}
			}

			.avctor {
				width: 66rpx;
				height: 66rpx;
			}
		}

		.list {
			.item {
				image {
					width: 70rpx;
					height: 64rpx;
				}
			}
		}
		.textContent {
			.item {
				
			}
		}
	}
</style>